<!--
 * @Author: HaiF
 * @Date: 2020-12-16 00:05:47
 * @LastEditTime: 2021-02-09 16:06:11
 * @LastEditors: Please set LastEditors
 * @Description:
 * @FilePath: \adminPC\src\views\role\widget\rolePower.vue
 * @可以输入预定的版权声明、个性签名、空行等
-->

<template>
  <el-main class="wrapper">
    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px; display:block;">
      <el-radio-button :label="true">菜单权限</el-radio-button>
      <el-radio-button :label="false">数据权限</el-radio-button>
    </el-radio-group>
    <el-tree
      ref="tree"
      class="dataTree"
      :data="allMenus"
      :default-checked-keys="roleMenu"
      node-key="id"
      :show-checkbox="isCollapse"
      :props="{
        label:'functionName'
      }"
      @node-click="handleNodeClick"
    />
    <div v-if="!isCollapse" class="dataPrower">
      <div style="margin-bottom: 20px;">数据权限</div>
      <el-radio-group :value="radioValue" @change="radioChange">
        <el-radio v-for="(i,k) in list" :key="k" :label="i.id">{{ i.scopeName }}</el-radio>
      </el-radio-group>
      <div v-if="!list.length">暂无数据</div>
    </div>
    <el-footer>
      <el-button type="primary" @click="subData()">提交</el-button>
      <el-button @click="subData('close')">取消</el-button>
    </el-footer>
  </el-main>
</template>

<script>
import { getRoleByRole, getListFun, getListMenu } from '@/api/menus'
import { getList, getListByRole, roleDataScope } from '@/api/dataPower'

export default {
  props: {
    roleId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isCollapse: true,
      allMenus: [],
      roleMenu: [],
      roleData: [],
      list: [],
      radio: [],
      currentSelectedTree: {}
    }
  },
  computed: {
    radioValue() {
      const { list, roleData } = this
      if (typeof roleData === 'string') return roleData
      let result = ''
      roleData.forEach(i => {
        const item = list.find(j => j.id === i)
        if (item)result = item.id
      })
      return result
    }
  },
  watch: {
    roleId: {
      handler: function(newval) {
        this.findFunction()
        this.findPowore()
      },
      immediate: true
    },
    allMenus(newval) {
      if (newval) {
        const oldConfig = this.tableConfig
        this.tableConfig = { ...oldConfig, selected: newval }
      }
    },
    isCollapse(newval) {
      if (newval === false) this.getMenus()
      if (newval === true) this.getAllMenus()
    }
  },
  created() {
    this.getAllMenus()
  },
  mounted() {},
  methods: {
    subData(type = 'submit') {
      if (!this.isCollapse) return this.roleDataScope()
      let subData = this.$refs.tree.getCheckedKeys()
      if (type === 'close') {
        subData = null
      }
      this.$emit('handleRole', subData)
    },
    getAllMenus() {
      getListFun().then(res => {
        const { data, code } = res
        if (code === 200) {
          this.allMenus = data
        }
      })
    },
    getMenus() {
      getListMenu().then(res => {
        const { data, code } = res
        if (code === 200) {
          this.allMenus = data
        }
      })
    },
    findFunction() {
      const id = this.roleId
      getRoleByRole(id).then(res => {
        const { code, data } = res
        if (code === 200) {
          this.roleMenu = data
        }
      })
    },
    findPowore() {
      const id = this.roleId
      getListByRole(id).then(res => {
        console.log(res)
        const { code, data } = res
        if (code === 200) {
          this.roleData = data
        }
      })
    },
    handleNodeClick(checkedNode, nodeStatus) {
      console.log(2111, checkedNode, nodeStatus)
      if (!this.isCollapse) {
        this.currentSelectedTree = checkedNode
        const menuId_eq = this.currentSelectedTree.id
        this.getFunction({}, menuId_eq)
      }
    },
    getFunction(args = {}, menuId_eq) {
      const { page: pageNum = 1, size: pageSize = 10, ...param } = args
      const params = { pageNum, pageSize, ...param }
      getList({ ...params, menuId_eq }).then(res => {
        const { data, code } = res
        if (code === 200) {
          this.list = data.records
        }
      })
    },
    roleDataScope() {
      const roleId = this.roleId
      const dataIds = this.roleData.toString()
      roleDataScope({ roleId, dataIds }).then(res => {
        const { code, message } = res
        if (code === 200) {
          this.$message({
            message: '绑定成功',
            type: 'success'
          })
          this.$emit('handleRole', null)
          return
        }
        this.$message.error(message)
      })
    },
    radioChange(value) {
      this.roleData = value
    }
  }
}
</script>
<style lang="scss" scoped>
.wrapper{
   padding: 0px;
   margin: 0;
   text-align: center;
   .dataTree{
     width: 300px;
     margin: 0 auto;
     display: inline-block;
     vertical-align: top;
   }
   .dataPrower{
    display: inline-block;
   }
}
</style>
